<?php 
include('./fun.php');
$conn=my_sql($cfg);
$set=get_set();

$bgs=$set['bg'];
$bg=$bgs[rand(0,1)];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
<meta name="Cache-control" content="no-tranform">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="Author" content="web_author">
<meta name="apple-mobile-web-app-title" content="">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="HandheldFriendly" content="true">
<meta name="msapplication-tap-highlight" content="no">
<meta name="description" content="$description">
<meta name="keywords" content="">
<title><?php echo ($set['title']?$set['title']:$cfg['webname']).' 系统登录';?></title>
<script src="./jquery.js"></script>
<script src="./jqm.js"></script>
<script src="./fun.js?t=<?php echo $cfg['time'];?>"></script>
<script src="./qrcode.js"></script>
<link type="text/css" rel="stylesheet" href="./style.css?t=<?php echo $cfg['time'];?>">

</head>

<style>
body{height:100vh}
box input{margin-top:5px;margin-bottom:10px;float:left;width:100%;height:50px;line-height:50px;border-radius:5px;background:rgba(0,0,0,0.1) !important;box-sizing:border-box;padding-left:10px;padding-right:10px;}
box img{float:left;width:100%;}
box text{float:left;width:100%;font-size:14px;text-align:center;}
login{position:fixed;width:100%;left:0;top:0;padding-left:50%;padding-top:150px;display:none;}
login_box{position:fixed;width:100%;padding-left:50%;top:20vh;}
login_box in_box{float:left;width:600px;margin-left:-300px;background:#333;border-radius:15px;padding:20px;z-index:10000;padding-left:20px;padding-right:20px}
view{float:left;width:100%;margin-top:15px;}
view input{float:left;width:100%;height:60px;line-height:60px;border:none;padding-left:60px;background:#fff;border-radius:30px;font-size:18px}
view icon{z-index:100;position:absolute;width:50px;height:60px;line-height:60px;text-align:center;font-size:36px !important;color:#999;left:5px}
view a{margin-top:10px;float:left;height:55px;line-height:55px;background:#09c;border-radius:4px;color:#fff;font-size:18px;padding-left:60px;padding-right:60px;margin-left:20px;margin-right:20px}
view a:hover{background:#f44;}
view text{color:#000;position:absolute;right:20px;height:60px;line-height:60px;color:#666;z-index:100;}
.is_get{color:#999}
.bts{display:flex;flex-direction:row;align-items:center;justify-content:center;}

.icon-qr-code{position:absolute;font-size:50px;right:-10px;top:0;z-index:100;}
box{position:fixed;width:800px;height:400px;margin:0;background:rgba(255,255,255,0.5);box-shadow:1px 1px 10px 1px rgba(0,0,0,0.05);left:300px;top:50px;border-radius:0px;overflow:hidden;}
box:hover{background:rgba(255,255,255,0.3)}
login_in_box{position:absolute;width:360px;height:100%;background:rgba(255,255,255,0.8);right:0;top:0;padding:20px;}
login_in_box logo{width:80px;height:80px;float:left;margin-left:120px;border-radius:20px;margin-bottom:10px;}
views{float:left;width:100%;height:50px;line-height:50px;margin-top:10px;}
views input{float:left;width:100%;height:50px;line-height:50px;background:rgba(255,255,255,.5) !important;border-bottom:2px solid #ddd;border-radius:0;padding-left:40px;margin:0;padding-right:10px;}
views icon{position:absolute;width:42px;height:50px;font-size:18px !important;line-height:50px;text-align:center;z-index:100;top:0;bottom:0;left:0;color:#00c8dc;}
views input:focus{background:rgba(0,137,151,0.1) !important;border-bottom:2px solid #00c8dc;}
views bt{float:left;width:100%;padding:5px;text-align:center;padding-left:10px;padding-right:10px}
views bt a{float:left;width:100%;height:50px;line-height:50px;background:#00c8dc;color:#fff;border-radius:5px;}
views bt a:hover{background:#000}
views bt .red{background:crimson;}
views text{position:absolute;height:50px;line-height:50px;right:10px;font-size:14px;width:auto;color:#666}
views_help{float:left;width:100%;height:32px;line-height:32px;text-align:center;margin-top:10px}
views_help a{height:32px;line-height:32px;color:#00c8dc;font-size:15px;margin-right:10px;}
views_help a:hover{color:crimson;}
#get_code{display:none;}
qr_login canvas{float:left;width:60%;}
qr_login{float:left;width:100%;display:flex;justify-content:center;margin-top:10px}
input_login_box{display:none;}
</style>
<body style="background:url(<?php echo $bg?>) no-repeat center;background-size:cover;">
<mask style="background:rgba(0,0,0,0.3);width:100%;height:100vh;position:absolute;left:0;top:0;"></mask>

<box>
<box_img style="z-index:-5;background:url(<?php echo $bg?>) no-repeat center;background-size:cover;position:fixed;left:0;top:0;width:100vw;height:100vh;position:absolute;"></box_img>

<login_in_box>
<logo style="background:url(<?php echo $set['logo'];?>) no-repeat center;background-size:cover;"></logo>

<input_login_box>
<views><icon class="icon icon-tonghua"></icon>
<input placeholder="用户名或者管理员手机号码" class="m" id="username">
</views>

<views id="get_pass"><icon class="icon icon-mima"></icon>
<input placeholder="登录密码" class="m" type="password" id="password">

</views>


<views>
<bt ><a class="m blue" onclick="login($(this))">登录</a></bt>
</views>
</input_login_box>


<qr_login id="qrcode"></qr_login>
<views_help style="text-align:center;padding-left:20px">
<a  onclick="change_login($(this))" val="pass" id="change_bt">使用帐户密码登录</a>
    
</views_help>

</login_in_box>

</box>


<script>
$(document).ready(function(){
window.login_mode='pass';
middle();
//$('box').draggable({drag:function(){img_bg()}});
window.cap_data={};
window.code_time=0;

get_qr();

});

function change_login(o){
var val=o.attr('val');
if(val=='pass'){
$('input_login_box').show();
$('qr_login').hide();
o.attr('val','code');
o.attr('使用二维码登录');
}else{
get_qr()
}

}


function get_qr(){
$.post('ac.php',{ac:'get_code'},function(res){
var d=json(res,1);
if(d.err=='ok'){
$('#qrcode').html('')
$('#qrcode').qrcode(d.code);

var o=$('#change_bt');
$('input_login_box').hide();
$('qr_login').show();
o.attr('val','pass');
o.attr('使用帐户密码登录');
window.ttt=setInterval(function(){
$.post('ac.php',{ac:'qr_is_login',code:d.code},function(res){
var d=json(res,1);
if(d.err=='ok'){
location.href="./index.php?t="+(new Date()).getTime()
}else{alert(d.err);}

})

},1000);
}else{msg(d.err);}
   
})    
}







function msg(str){alert(str)}

function login(o){
var username=$('login_in_box #username').val();
var pass=$('login_in_box #password').val();if(!pass){pass='';}
var code=$('login_in_box #code').val();if(!code){code='';}
if(!username){msg('请输入登录帐号');return;}
//if(!is_phone(phone)){msg('您的手机号码有误');return;}
if(window.login_mode=='pass'){//密码
if(!pass){msg('请输入登录密码');return}
}else{
if(!code){msg('请获取并输入手机验证码');return;}
}

$.post('ac.php',{ac:'adm_login',username:username,pass:pass,code:code,mode:window.login_mode},function(res){
var d=json(res,1);
if(d.err=='ok'){
location.href="./?t="+(new Date()).getTime();
}else{
msg(d.err);
}
});
}


function is_phone(pone) {
    var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
    if (!myreg.test(pone)) {
      return false;
    } else {
      return true;
    }
  }


function img_bg(){
var l=$('box').position().left;
var t=$('box').position().top;
var w=$(document).width();
var h=$(document).height();
$('box box_img').css({left:-l+'px',top:-t+'px',width:w+'px',height:h+'px'});
}
function middle(){
var w=$(document).width();
var h=$(document).height();
var l=Math.ceil((w-800)/2);
$('box').css({left:l+'px',top:'120px'});

img_bg();
}
</script>
</body>
</html>